<template>
  <div>
    <el-tooltip class="item" effect="dark" content="点我开始聊天" placement="top">
      <div class="ai" @click="showFn()">
        <el-image :src="require('../assets/image/ai.webp')"></el-image>
      </div>
    </el-tooltip>

    <div :class="show === true ? 'contentR' : 'content'" v-if="show === true">
      <div class="head">
        <div class="left">
          <el-image :src="require('../assets/image/ai.webp')"></el-image>
          <div>小思同学</div>
        </div>

        <div class="right" @click="showFn()">
          <i class="el-icon-minus"></i>
        </div>
      </div>

      <div class="body" id="talk">
        <div v-for="(item, i) in myMes" :key="i">
          <div class="time">{{ time[i] }}</div>
          <div class="msgBox">
            <div class="msg-contentm"> {{ item }}</div>
            <el-image :src="avatarUrl"></el-image>
          </div>

          <div class="time">{{ time2[i] }}</div>
          <div class="msgBoxR">
            <el-image :src="require('../assets/image/ai.webp')"></el-image>
            <div class="msg-content">{{ resMes[i] }}</div>
          </div>
        </div>

      </div>

      <div class="footer">
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea">
        </el-input>
        <el-button type='primary' @click="send()" :disabled="disabled">发送</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import debounce from "@/utils/debounce.js";
export default {

  data() {
    return {
      textarea: '',
      show: false,
      myMes: [],
      resMes: [],
      avatarUrl: '',
      disabled: false,
      time: [],
      time2: []
    }
  },
  watch: {
    myMes() {
      this.time.push(this.$utils.getLocalTime(this.$utils.timestamp()))
      this.myfn()
    },
    resMes() {
      this.myfn()
    },
    show() {
      this.avatarUrl = localStorage.getItem('avatarUrl');
      console.log(this.avatarUrl)
    }
  },
  methods: {
    send: debounce(async function () {
      if (this.textarea !== '') {
        this.disabled = true
        this.myMes.push(this.textarea)
        const { data: ret } = await this.$http.get('robot', {
          params: {
            spoken: this.textarea
          }
        })
        if (ret.message === 'success') {
          this.textarea = ''
          this.resMes.push(ret.data.info.text)
          this.time2.push(this.$utils.getLocalTime(this.$utils.timestamp()))
        } else {
          this.$message.error('超时')
        }
        this.disabled = false
      } else {
        this.$message.error('不能为空')
      }
    }, 1000),
    showFn() {
      if (this.show === true) {
        this.show = false
      } else {
        this.show = true
        if (this.resMes.length > 5) {
          this.myfn()
        }
      }
    },
    myfn() {
      //页面内容发生变化的时候自动下拉
      this.$nextTick(() => {
        var container = this.$el.querySelector('#talk')
        container.scrollTop = container.scrollHeight - 10
      })
    }
  },
}
</script>

<style scoped>
.ai {
  z-index: 21;
  width: 50px;
  position: fixed;
  bottom: 100px;
  right: 10px;
  background: #f0f3f4;
  box-shadow: 6px 2px 5px 5px rgb(87 75 75 / 20%)
}

.content,
.contentR {
  z-index: 21;
  width: 364px;
  height: 574px;
  position: fixed;
  right: 70px;
  bottom: 80px;
  box-shadow: 0px 4px 12px 0px rgb(8 23 26 / 20%);
}

.contentR {
  animation: show 1s linear;
}



@keyframes show {
  from {
    bottom: -500px;
  }

  to {
    bottom: 60px;
  }
}



.head {
  height: 64px;
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: space-between;
  background: rgb(93, 124, 182);
  padding: 0 16px;
}

.left {
  display: flex;
  align-items: center;
}


.body {
  height: 375px;
  background: rgb(245, 245, 245);
  padding: 0 12px;
  overflow-y: scroll;
  padding-top: 20px;
}

.body .el-image {
  height: 50px;
  width: 50px;
}

.footer {
  height: 135px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.head .el-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.el-button {
  margin-left: 5px;
  margin-top: 75px
}

.el-icon-minus {
  font-size: 24px;
}

.msg-content,
.msg-contentm {
  display: flex;
  padding: 15px 12px;
  max-width: 260px;
  border-radius: 5px;
}

.msg-content {
  margin-left: 10px;
  background-color: rgb(255, 255, 255);
}

.msg-contentm {
  margin-right: 10px;
  background-color: #04BE02;
  color: #fff;
}

.msgBox,
.msgBoxR {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.msgBox {
  justify-content: flex-end;
}

.msgBoxR {
  justify-content: flex-start;
}

.time {
  text-align: center;
  color: #978c8c;
}
</style>